{%extends 'layout.html'%}
{%block main%}
<ol class="breadcrumb">
    <li><a href="#">管理首页</a></li>
    <li> <span>分类编辑</span> </li>
</ol>
<h3>分类编辑 - {{category.name}}</h3>

<form role="form" method="post" >
        <div class="form-group">
                <label for="title">分类:</label>
                <select name="category" id="category" class="form-control">
                   {%for category in categorys%}
                   <option value="{{category.id}}">{{category.name}}</option>
                   {%endfor%}
                </select>
            </div>
            <div class="form-group">
                <label for="name">内容标题</label>
                <input type="text" class="form-control" id="title" placeholder="{{content.title}}" name="title">
            </div>
            <div class="form-group">
                <label for="description">简介</label>
                <!-- <input type="text" class="form-control" id="description" aria-rowcount='5' placeholder="{{content.description}}" name="description"> -->
                <textarea name="description" class="form-control" id="description" cols="30" rows="10">{{content.description}}</textarea>
            </div>
            <div class="form-group ">
                    <label for="text-input">内容：</label>
                    <textarea class="form-control" oninput='this.editor.update()' id="text-input" rows="10"
                        placeholder="请输入内容">{{content.content}}</textarea>
                </div>
                <div id="after_marked">
                    <label for="preview">marked：</label>
                    <textarea class="form-control" name="content" id="preview" rows="10"　id="content"></textarea>
                </div>
            
            <button type="submit" class="btn btn-default">提交</button>
  </form>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
    function Editor(input, preview) {
        this.update = function () {
            preview.innerHTML = marked(input.value);
        };
        input.editor = this;
        // this.update();
    }
    var $$ = function (id) { return document.getElementById(id); };
    // console.log(document.getElementById('text-input'));
    new Editor($$("text-input"), $$("preview")).update();
</script>


{%endblock%}